<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2024-03-02 23:20:15
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-07 20:29:43
 * @Description: 
 * @FilePath: \graDesign\src\views\UserInfo\components\FaceBasePane.vue
-->
<template>
  <div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="原人脸数据：" prop="oldFacebase">
        <img :src="ruleForm.oldFacebase" alt="暂无图片..." />
      </el-form-item>
      <el-form-item label="新人脸数据：" prop="newFacebase">
        <FaceEnter ref="faceEnterRef" @confirm="confirmFace" :clearFaceBase="clearFaceBase" />
      </el-form-item>
      <el-form-item class="btns">
        <span class="dialog-footer">
          <el-button @click="resetRuleForm(ruleFormRef)">重 置</el-button>
          <el-button type="success" @click="ensureUpdate(ruleFormRef)"
            >确 定</el-button
          >
        </span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject, onMounted, onUnmounted, onBeforeUnmount } from "vue";
import type { FormInstance, FormRules } from "element-plus";
// api
import editUserApi from "@/request/api/user";
// store
import useLoginStore from "@/store/login";
import { showMessageBox } from "@/utils/alertMsg";

const loginStore = useLoginStore();

interface RuleForm {
  oldFacebase: string;
  newFacebase: string;
}

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  oldFacebase: "",
  newFacebase: "",
});

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({}),
  }
});

// 刷新子路由
const reload: Function = inject("reload");

const init = () => {
  if (props.userInfo) {
    ruleForm.oldFacebase = props.userInfo.faceBase;
  }
};

// 子组件实例
const faceEnterRef = ref()
onMounted(() => {
  init();
});

onBeforeUnmount(() => {
  faceEnterRef!.value.handleCloseCamera();
});

// 校验规则
const rules = reactive<FormRules<RuleForm>>({
  oldFacebase: [{ required: true, trigger: "blur" }],
  newFacebase: [{ required: true, message: "请录入新的人脸", trigger: "blur" }],
});

// 录入人脸回调
const confirmFace = (model: any) => {
  // 表单赋值
  ruleForm.newFacebase = model.faceBase;
  clearFaceBase.value = false;
};

// 是否清除已拍照的图片
const clearFaceBase = ref<boolean>(false);
// 重置
const resetRuleForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  clearFaceBase.value = true;
  // 清除表单同时 清除图片
  if (clearFaceBase.value) {
    ruleForm.newFacebase = "";
  }
  //   formEl.resetFields();
};

/**
 * defineEmits emit给父组件
 */
interface EmitEvent {
  (e: "closeDialog"): void;
}
const emit = defineEmits<EmitEvent>();
const close = () => {
  emit("closeDialog");
};


const ensureUpdate = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      editUserApi.updateUserFaceImage(ruleForm).then((res: any) => {
        if (res.code == 200) {
          showMessageBox("success", res.msg, 3000, false);
          loginStore.getAndSetUserInfo();
          close();
          setTimeout(() => {
            reload();
          }, 500);
        } else {
          showMessageBox("error", res.msg, 3000, false);
        }
      });
    } else {
      console.log("invalid");
    }
  });
};
</script>

<style scoped lang="scss"></style>
